<template>
  <div class="header">
    <el-aside style="width:300px;border:0px;margin-top: 19px;height: auto;">
      <el-container>
        <el-header style="width: 300px;height: auto;">
          <el-card class="box-card box-card-row">
            <el-row>
              <el-col :span="24">
                <el-button type="primary">本站会员</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-button type="warning">优选连载</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-button type="success">教学视频</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-button type="danger">音乐观赏</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="height: 1px;"></el-col>
            </el-row>
          </el-card>
        </el-header>
        <el-main style="width:300px;height: auto;">
          <el-card class="box-card">
            <el-row>
              <el-col :span="24" style="margin-top: -10px;margin-bottom: 10px;">
                <el-link type="danger" :underline="false" style="font-size: 16px">个人及网站信息</el-link>
              </el-col>
              <el-col :span="24">
                <el-link type="info" :underline="false">网名：DanceSmile | 即步非烟</el-link>
              </el-col>
              <el-col :span="24">
                <el-link type="info" :underline="false">职业：Web前端设计师、网页设计</el-link>
              </el-col>
              <el-col :span="24">
                <el-link type="info" :underline="false">现居：四川省-成都市</el-link>
              </el-col>
              <el-col :span="24">
                <el-link type="info" :underline="false">建站时间：2019-11-16</el-link>
              </el-col>
              <el-col :span="24">
                <el-link type="info" :underline="false">技术栈：vue+element+laravel</el-link>
              </el-col>
              <el-col :span="24">
                <el-link type="info" :underline="false">文章统计：{{total}}篇文章</el-link>
              </el-col>
              <el-col :span="24">
                <el-link type="info" :underline="false">微信公众号：扫描二维码，关注我</el-link>
              </el-col>
              <el-col style="text-align: center;margin-top: 10px;">
                <el-image style="width: 130px;height: 130px" :src="`${publicPath}img/qrCode.png`"></el-image>
              </el-col>
            </el-row>
          </el-card>
        </el-main>
      </el-container>
    </el-aside>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        input: '',
        publicPath: process.env.BASE_URL,
        total: 250
      }
    },
    mounted () {

    },
    watch: {

    },

    methods: {
    }
  }
</script>

<style lang="scss">
  #app{
    color: #333333;
    margin: 0 auto;
  }
  .el-container{
    height:100%;
    padding:0;
    margin:0;
    width:100%;
  }
  .el-header{
    height: auto;
    margin:0 auto;
    border: 0px solid #333;
  }
  .el-main{
    height: 300px;
    border: 0px solid #333;
  }
  .el-aside{
    height: 400px;
    border: 0px solid #333;
  }
  .el-input{
    width: 150px;
    border-radius: 40px;
    height: 38px;
  }
  .el-tag{
    margin: 0 10px;
  }
  .box-card-row .el-row{
    margin: 15px auto;
  }
  .box-card-row .el-row .el-button{
    width: 220px;
  }
  ul li {
    list-style: none;
    background-color: #fff;
  }
  .el-ul .el-button{
    width: 177px;
    margin: 5px;
  }
  .text ul li{
    min-height: 112px;
  }
  #app .el-div span{
    display: inline-block;
    height: 15px;
    margin: 5px;
  }
</style>
